<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block data-th-replace="/adminlte/base::base-head"></th:block>
	<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="modal fade" id="dialog-account-edit">
		<div class="modal-dialog">
			<div class="modal-content" style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
				<div class="modal-header">
					<h4 class="modal-title">修改密码</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<form action="/accounts/self" method="put" data-dialog-close="#dialog-account-edit">
					<div class="modal-body">
						<div class="form-group">
							<label><span class="text-red">*</span> 用户名</label> <label data-t="username"
								class="form-control"></label>
						</div>
						<div class="form-group">
							<label><span class="text-red">*</span> 用户密码</label> <input data-v="password" type="text"
								class="form-control" maxlength="32" name="password" placeholder="用户密码"
								required="required">
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default float-left" data-dismiss="modal" style="width: 100px"
							type="button">取消
						</button>
						<button class="btn btn-success float-right" style="width: 100px" type="submit">确定
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="content-wrapper">
			<div class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1 class="m-0 text-dark">用户信息</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#"> 用户相关</a></li>
								<li class="breadcrumb-item"><a href="/admin/user"> 用户管理</a></li>
								<li class="breadcrumb-item active">用户信息</li>
							</ol>
						</div>
					</div>
				</div>
			</div>
			<section class="content">
				<div class="container-fluid">
					<div class="card">
						<div class="card-header row">
							<div class="col-sm-6">
								<label class="card-title" th:utext="${'用户ID： '+target.id}">用户账号：</label>
							</div>
							<div class="col-sm-6" th:with="account=${accountUtils.getByUserId(target.id)}">
								<a title="修改" class="float-sm-right" data-dialog="show" data-url="#dialog-account-edit"
									th:data-dialog-action-id="${account.id}"
									th:data-dialog-t-username="${account.username}"> <i class="fas fa-edit text-blue"
										style="margin-left: 10px;"></i>
								修改密码
								</a>
								<a title="修改" class="float-sm-right" href="/admin/user/safe/self"> <i class="fas fa-user-shield text-blue"
										style="margin-left: 10px;"></i>
								安全信息
								</a>
							</div>
						</div>

						<form class="form-horizontal" action="/users/self" method="put">
							<div class="card-body">
								<div class="form-group">
									<label class="col-auto control-label" style="margin-top: 10px">头像</label>
									<div class="col-auto">
										<img id="userImage" name="image"
											th:src="${StringUtils.isNotEmpty(target.image)?target.image:'/admin/dist/img/user3-128x128.jpg'}"
											class="img-circle" alt="User Image" style="width: 200px; height: 200px; object-fit: cover; cursor: pointer;"
											onclick="onClick('#userInput')" />
										<p class="help-block">头像支持JPG/PNG/GIF格式，小于4MB</p>
										<input id="userInput" type="file" style="display: none;" accept="image/*"
											onchange="save2Id(this.files[0], 'userImage')" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">姓名</label>
									<div class="col-auto">
										<input type="text" class="form-control" name="name" placeholder="姓名"
											autofocus="autofocus" th:value="${target.name}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label"><span class="text-red">*</span> 昵称</label>
									<div class="col-auto">
										<input type="text" class="form-control" name="nickname" required="required"
											placeholder="昵称" th:value="${target.nickname}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">性别</label>
									<div class="col-auto" th:object="${target.gender}">
										<label class="col-auto control-label" style="text-align: left;"> <input
												type="radio" name="gender" class="minimal" style="margin-right: 5px"
												value="1" th:checked="${target.gender.value == 1}">男
										</label> <label class="col-auto control-label" style="text-align: left;"> <input
												type="radio" name="gender" class="minimal" style="margin-right: 5px"
												value="2" th:checked="${target.gender.value == 2}">女
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">生日</label>
									<div class="col-auto">
										<div class="input-group date">
											<div class="input-group-prepend">
												<span class="input-group-text"><i class="far fa-clock"></i></span>
											</div>
											<input type="datetime" name="birth" class="form-control float-right"
												id="datepicker" th:value="${target.birth}">
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">地址</label>
									<div class="col-auto">
										<input type="text" name="address" class="form-control" placeholder="地址"
											th:value="${target.address}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-auto control-label">个人介绍</label>
									<div class="col-auto">
										<textarea class="form-control" name="introduction" rows="5" placeholder="个人介绍"
											th:utext="${target.introduction}"></textarea>
									</div>
								</div>
								<div class="row justify-content-center">
									<button type="submit" class="btn btn-info" style="width: 200px">保存</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
	<script src="/kaibes/js/file.js"></script>
	<script src="/admin/js/user-edit.js"></script>
</body>

</html>